<template>
  <section class="container px-4">
    <Breadcrumbs title="All boxes" details="Box detail" toPath="/all-boxes" />
    <section class="mx-auto sm:w-[95%] max-w-[1400px]">
      <div class="flex flex-col items-center relative" data-v-7f13ab74="">
        <h5
          class="pb-10 text-xl sm:text-2xl tracking-wider font-bold"
          data-v-7f13ab74=""
        >
          {{ boxItem.box_name }}
        </h5>
        <div
          class="absolute right-0 top-0 hover:opacity-75 cursor-pointer"
          data-v-7f13ab74=""
        >
          <svg
            v-show="isShowVoice"
            @click="isShowVoice = false"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            class="h-6 w-6"
            data-v-7f13ab74=""
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
            ></path>
          </svg>
          <svg
            v-show="!isShowVoice"
            @click="getVoice"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            class="h-6 w-6"
            data-v-7f13ab74=""
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
              clip-rule="evenodd"
            ></path>
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
            ></path>
          </svg>
        </div>
        <!---->
        <div class="flex flex-col items-center" data-v-7f13ab74="">
          <div
            class="rounded border border-gray-lightest overflow-hidden"
            data-v-7f13ab74=""
            v-show="!showRoll"
          >
            <img
              class="w-[260px] h-[260px] sm:w-[310px] sm:h-[310px] object-cover"
              :src="boxItem.box_foot_images"
              alt=""
              data-v-7f13ab74=""
            />
          </div>
          <template v-if="showRoll">
            <div
              class="overflow-hidden max-w-[100%] relative"
              data-v-7f13ab74=""
            >
              <div class="slot-bg" data-v-7f13ab74=""></div>
              <div
                class="pointer absolute w-[300px] h-full -translate-x-1/2 left-1/2 border-b border-t border-[#ffc700] z-[20]"
                data-v-7f13ab74=""
              ></div>
              <Roll
                v-for="(_, i) in new Array(+choose).fill('')"
                :key="i"
                :ref="`roll${i}`"
                :list="shopList"
                :num="choose"
                @success="rollSuccess"
              />
            </div>
          </template>
          <div class="py-8 font-bold text-[30px]" data-v-7f13ab74="">
            Ł{{ total }}
          </div>
          <div
            id="headlessui-radiogroup-129"
            role="radiogroup"
            class="flex mb-7"
            data-v-7f13ab74=""
          >
            <!---->
            <div
              class="text-sm flex flex-wrap flex-shrink-1 gap-y-2"
              role="none"
            >
              <div
                v-for="(item, index) in num"
                :key="index"
                @click="sum(item)"
                :class="[
                  'group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2  border-2 px-px  hover:text-[#ff7c00]',
                  { 'border-[#ff7c00] text-[#ff7c00]': choose == item },
                ]"
                id="headlessui-radiogroup-option-130"
                role="radio"
                aria-checked="true"
                tabindex="0"
              >
                <div
                  id="tooltip-light"
                  role="tooltip"
                  class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
                >
                  <span>×1</span>
                </div>
                <p class="px-3">×{{ item }}</p>
              </div>
            </div>
          </div>
          <div
            tabindex="0"
            aria-describedby="el-popper-1008"
            class=""
            data-v-7f13ab74=""
            @click="openBox"
          >
            <button
              type="button"
              class="rounded no-underline border flex items-center justify-center text-black-50 border-transparent py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-[300px]"
              data-v-7f13ab74=""
            >
              <div>开启箱子</div>
              <!---->
            </button>
          </div>
          <!---->
        </div>
        <!---->
      </div>
      <div class="my-14">
        <div class="border-b border-gray-lightest flex pb-4 mb-8">
          <h3 class="text-black text-2xl font-semibold mr-3">Box Contents</h3>
          <button class="flex text-sm items-center text-black-50">
            <img src="../../assets/img/question.svg" class="mr-1.5" /> View Rules
          </button>

        </div>
        <div class="bg-gray-darkest rounded">
          <div
            class="relative grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 md:gap-4 lg:grid-cols-6 lg:gap-4 p-4"
          >
            <router-link
              :to="`/product?id=${item.id}`"
              class=""
              v-for="(item, index) in shopList"
              :key="item.id"
            >
              <div
                class="text-black-85 w-full bg-no-repeat bg-white bg-contain bg-center relative rounded overflow-hidden shadow-sm cursor-pointer hover:shadow-yellow aspect-w-1 aspect-h-1 group aspect-h-4 aspect-w-4 sm:aspect-h-5 sm:aspect-w-4"
                data-v-87f13480=""
              >
                <div data-v-87f13480="">
                  <div
                    class="p-2.5 text-[10px] leading-[10px] sm:leading-4 sm:text-xs absolute z-10 top-0 slot-item-name font-bold"
                    data-v-87f13480=""
                  >
                    <div>
                      <strong>{{ item.goods_name }}<br /></strong>黑色
                    </div>
                  </div>
                  <div
                    class="w-[90%] h-[65%] absolute z-auto top-[30%] left-[5%] bg-no-repeat bg-contain bg-center"
                    data-v-87f13480=""
                    :style="`background-image: url(${item.image}); background-size: contain;`"
                  ></div>
                  <div
                    class="absolute -bottom-2 left-0 text-rarities-2"
                    data-v-87f13480=""
                  >
                    <svg
                      height="22"
                      viewBox="0 0 180 8"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                      data-v-87f13480=""
                      style="width: 100%"
                    >
                      <path
                        opacity="0.2"
                        d="M180 0L90 5.33333V8H180V0Z"
                        data-v-87f13480=""
                      ></path>
                      <path
                        opacity="0.6"
                        d="M0 0L180 6V8H0V0Z"
                        data-v-87f13480=""
                      ></path>
                    </svg>
                  </div>
                  <!---->
                  <div
                    class="absolute inset-0 hidden group-hover:block"
                    data-v-87f13480=""
                  >
                    <div
                      class="w-full h-[30%] max-h-100px font-bold flex flex-col align-center justify-center absolute bottom-0 shadow-chance text-center text-white bg-[#000000CC] animate-pop"
                      data-v-87f13480=""
                    >
                      <div class="inset-x-0 text-xs" data-v-87f13480="">
                        Ł{{ item.c_pirce }}
                      </div>
                      <!-- <div class="inset-x-0 text-xs" data-v-87f13480="">机会：0.03405%</div> -->
                    </div>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </section>
    <transition name="el-fade-in-linear">
      <ProdModal v-show="prodVisible" :list="prodItem" @close="handleClose" />
    </transition>
    <!----><!---->
  </section>
</template>
<script>
import Roll from "@/components/Roll/index.vue";
import ProdModal from "./components/ProdModal.vue";
import Breadcrumbs from "@/components/Breadcrumbs/index.vue";
export default {
  components: { Roll, ProdModal, Breadcrumbs },
  created() {
    this.$api
      .getBoxShop({
        box_id: this.$route.query.id,
      })
      .then((res) => {
        this.boxItem = res.data.data.mh;
        this.total = res.data.data.mh.price;
        this.shopList = res.data.data.shop;
      });
    // this.$api.getVideo().then((res) => {
    //   console.log(res);
    //   this.src = res.data.data.video12;
    //   this.video = res.data.data;
    //   // let audio = new Audio();
    //   // audio.src = this.src;
    //   // audio.play();
    // });
  },
  data() {
    return {
      boxItem: {},
      shopList: [],
      showRoll: false,
      prodVisible: false,
      prodItem: [],
      num: ["1", "2", "3", "4", "5"],
      total: "",
      choose: "1",
      isShowVoice: true,
      src: "",
      video: null,
    };
  },
  methods: {
    handleClose() {
      this.prodVisible = false;
      this.showRoll = false;
      this.prodItem = [];
    },
    sum(number) {
      this.total = (number * this.boxItem.price).toFixed(2);
      this.choose = number;
    },
    async openBox() {
      if (!this.showRoll) {
        this.showRoll = true;
        return;
      }
      let token = localStorage.getItem("token");
      let out_trade_no = await this.$api
        .submitBuyBox({
          box_id: this.$route.query.id,
          buy_num: this.choose,
          token,
        })
        .then((res) => res.data.data.out_trade_no);
      let data = await this.$api
        .openBox({
          out_trade_no,
          token,
        })
        .then((res) => res.data.data?.prize_goods_data);
      // let data = new Array(5).fill("").map((item) => ({
      //   good_images:
      //     "http://box003.oss-cn-shanghai.aliyuncs.com/box006/25cf8cbf4a3a468e8164e1a71e23ed21.jpg",
      //   id: 4,
      //   c_pirce: "14998.00",
      //   tag: "传说级",
      //   goods_name: "苹果14ProMax1TB",
      //   image:
      //     "http://box003.oss-cn-shanghai.aliyuncs.com/box006/25cf8cbf4a3a468e8164e1a71e23ed21.jpg",
      //   sort: 4,
      // }));
      for (let i = 0; i < new Array(+this.choose).fill("").length; i++) {
        setTimeout(() => {
          this.$refs[`roll${i}`]?.[0]?.open(data[i]);
          if (this.isShowVoice) {
            let audio = new Audio();
            audio.src =
              "https://box003.oss-cn-shanghai.aliyuncs.com/wx/z3%20-1.mp3";
            audio.play();
          }
        }, 200 * i);
      }
    },
    rollSuccess(item) {
      this.prodItem.push(item);
      this.prodVisible = true;
    },
    getVoice() {
      this.isShowVoice = true;
      // this.$api.getVideo().then((res) => {
      //   console.log(res);
      //   this.src = res.data.data.video12;
      //   let audio = new Audio();
      //   audio.src = this.src;
      //   audio.play();
      // });
    },
  },
};
</script>
<style lang="" scoped></style>

<style lang="" scoped></style>
